<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="icon" href="./shop.ico" type="image/x-icon">


    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#user-signup").hide();
            $("#signup-box-link").click(function () {
                $("#user-login").fadeOut(100);
                $("#user-signup").delay(100).fadeIn(100);
                $("#login-box-link").removeClass("active");
                $("#signup-box-link").addClass("active");
            });
            $("#login-box-link").click(function () {
                $("#user-login").delay(100).fadeIn(100);;
                $("#user-signup").fadeOut(100);
                $("#login-box-link").addClass("active");
                $("#signup-box-link").removeClass("active");
            });
        });

    </script>

    <style>
        body {
            background-color: rgb(204,212,230);
            height: 100%;
        }

        .login-box {
            position: relative;
            margin: 10px auto;
            width: 500px;
            height: 380px;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.33);
            -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.33);
            box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.33);
        }

        .lb-header {
            position: relative;
            color: #00415d;
            margin: 5px 5px 10px 5px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            text-align: center;
            height: 28px;
        }

        .lb-header a {
            margin: 0 25px;
            padding: 0 20px;
            text-decoration: none;
            color: #666;
            font-weight: bold;
            font-size: 15px;
            -webkit-transition: all 0.1s linear;
            -moz-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .lb-header .active {
            color: #029f5b;
            font-size: 18px;
        }

        #user-login,
        #user-signup {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            margin-top: 20px;
            text-align: center;
        }

        .u-form-group {
            width: 100%;
            margin-bottom: 10px;
        }

        .u-form-group input[type="name"],
        .u-form-group input[type="password"],
        .u-form-group input[type="email"]{
            width: calc(50% - 22px);
            height: 45px;
            outline: none;
            border: 1px solid #ddd;
            padding: 0 10px;
            border-radius: 2px;
            color: #333;
            font-size: 0.8rem;
            -webkit-transition: all 0.1s linear;
            -moz-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .u-form-group input:focus {
            border-color: #358efb;
        }

        .u-form-group button {
            width: 50%;
            background-color: #1CB94E;
            border: none;
            outline: none;
            color: #fff;
            font-size: 14px;
            font-weight: normal;
            padding: 14px 0;
            border-radius: 2px;
            text-transform: uppercase;
        }

        .footer {
            background-color: darkgrey;
            color: white;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
        }



        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {

            0%,
            100% {
                transform: rotate(0)
            }

            20%,
            60% {
                transform: rotate(-25deg)
            }

            40%,
            80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width:500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }

    </style>
</head>

<body>
    <div class="login-box">
        <div class="lb-header">
            <a href="#" class="active" id="login-box-link">登录</a>
            <a href="#" id="signup-box-link">注册</a>
        </div>
        <form id="user-login">
            <div class="u-form-group">
                <input name="name" type="name" placeholder="用户名" />
            </div>
            <div class="u-form-group">
                <input name="password" type="password" placeholder="密码" />
            </div>
            <div class="u-form-group">
                <button type="button" id="btn-login">登录</button>
            </div>

        </form>
        <form id="user-signup">
            <div class="u-form-group">
                <input name="username" type="name" placeholder="用户名" />
            </div>
            <div class="u-form-group">
                <input name="password" type="password" placeholder="密码" />
            </div>
            <div class="u-form-group">
                <input type="password" placeholder="确认密码" />
            </div>
            <div class="u-form-group">
                <input name="email" type="email" placeholder="邮箱" />
            </div>
            <div class="u-form-group">
                <button type="button" id="btn-reg">注册</button>
            </div>
        </form>
    </div>
    <footer class="footer">
        <div class="container">
            <p class="text-xs-center">电商商城项目© Copyright info Xu Runji,SCUT <a href="mycard.html">我的名片</a></p>
        </div>
    </footer>
    <script type="text/javascript">
        $("#btn-reg").click(function() {

            console.log($("#user-signup").serialize());

            $.ajax({
                url: "/users/reg",
                type: "POST",
                data: $("#user-signup").serialize(),
                dataType: "json",
                success: function(json) {
                    if (json.state == 200) {
                        alert("注册成功！");
                        // location.href = "login.html";
                        console.log("OK")
                    } else {
                        alert("注册失败！" + json.message);
                        console.log("FALSE")
                    }
                }
            });
        });

        $("#btn-login").click(function() {
            console.log($("#user-login").serialize());
            $.ajax({
                url: "/users/login",
                type: "POST",
                data: $("#user-login").serialize(),

                dataType: "json",
                success: function(json) {
                    if (json.state == 200) {
                        alert("登录成功！");
                        location.href = "index.html";
                    } else {
                        alert("登录失败！" + json.message);
                    }
                }
            });
        });
    </script>

    <script>
        function o(w, v, i) {
            return w.getAttribute(v) || i
        }
        function j(i) {
            return document.getElementsByTagName(i)
        }
        function l() {
            var i = j("script"), w = i.length, v = i[w - 1];
            return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.5), c: o(v, "color", "0,0,0"), n: o(v, "count", 99) }
        }
        function k() {
            r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
        function b() {
            e.clearRect(0, 0, r, n);
            var w = [f].concat(t);
            var x, v, A, B, z, y;
            t.forEach(function (i) {
                i.x += i.xa,
                    i.y += i.ya,
                    i.xa *= i.x > r || i.x < 0 ? -1 : 1,
                    i.ya *= i.y > n || i.y < 0 ? -1 : 1,
                    e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
                for (v = 0; v < w.length; v++) {
                    x = w[v];
                    if (i !== x && null !== x.x && null !== x.y) {
                        B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
                        y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
                    }
                }
                w.splice(w.indexOf(i), 1)
            }), m(b)
        }
        var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n,
            m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
                window.setTimeout(i, 1000 / 45)
            },
            a = Math.random, f = { x: null, y: null, max: 20000 };
        u.className = "particle_canvas";
        var browserName = navigator.userAgent.toLowerCase();
        if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
            u.className += ' ie10_gte';
        };
        u.id = c;
        u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
        j("body")[0].appendChild(u);
        k(), window.onresize = k;
        window.onmousemove = function (i) {
            i = i || window.event,
                f.x = i.clientX,
                f.y = i.clientY
        },
            window.onmouseout = function () {
                f.x = null,
                    f.y = null
            };
        for (var t = [], p = 0; s.n > p; p++) {
            var h = a() * r,
                g = a() * n,
                q = 2 * a() - 1,
                d = 2 * a() - 1;
            t.push({ x: h, y: g, xa: q, ya: d, max: 6000 })
        }
        setTimeout(function () { b() }, 100)
    </script>

</body>

</html>